var grids;
var context;
var timer;

const SIDELEN = 70;
const MARGIN = 5;

export default {
    data: {
        currentSeconds: '0.0',
        isShow: false
    },
    onInit() {
        grids=[[1, 2, 3, 4],
               [5, 6, 7, 8],
               [9, 10, 11, 12],
               [13, 14, 15, 0]];
        timer = null;

        this.initGrids();
        this.drawGrids();
    },
    initGrids(){
        let array=["left","up","right","down"];

        for (let i = 0; i < 100; i++){
            let randomIndex = Math.floor(Math.random() * 4);
            let direction = array[randomIndex];
            this.changeGrids(direction);
        }
    },
    onReady() {
        context = this.$refs.canvas.getContext('2d');
    },
    onShow() {
        this.initGrids();
        this.drawGrids();

        timer = setInterval(this.run, 100);
    },
    drawGrids() {
        for (let row = 0; row < 4; row++) {
            for (let column = 0; column < 4; column++) {
                let gridStr = grids[row][column].toString();

                context.fillStyle = "#BBADA0";
                let leftTopX = column * (MARGIN + SIDELEN) + MARGIN;
                let leftTopY = row * (MARGIN + SIDELEN) + MARGIN;
                context.fillRect(leftTopX, leftTopY, SIDELEN, SIDELEN);

                context.font = "30px HYQiHei-65S";
                if (gridStr != "0") {
                    context.fillStyle = "#000000";
                    let offsetX = (4 - gridStr.length) * (SIDELEN / 8);
                    let offsetY = (SIDELEN - 30) / 2;
                    context.fillText(gridStr, leftTopX + offsetX, leftTopY + offsetY);
                }
            }
        }
    },
    run(){
        this.currentSeconds = (Math.floor(parseFloat(this.currentSeconds) * 10+ 1) / 10).toString();
        if(parseFloat(this.currentSeconds) % 1 == 0){
            this.currentSeconds = this.currentSeconds + ".0";
        }
    },
    swipeGrids(event) {
        this.changeGrids(event.direction);
        this.drawGrids();

        if(this.gameover()){
            clearInterval(timer);
            this.isShow = true;
        }
    },
    gameover(){
        let originalgrids=[[1, 2, 3, 4],
                           [5, 6, 7, 8],
                           [9, 10, 11, 12],
                           [13, 14, 15, 0]];
        for (let row = 0; row < 4; row++) {
            for (let column = 0; column < 4; column++) {
                if (grids[row][column] != originalgrids[row][column]){
                    return false;
                }
            }
        }
        return true;
    },
    changeGrids(direction) {
        let x;
        let y;
        for (let row = 0; row < 4; row++) {
            for (let column = 0; column < 4; column++) {
                if (grids[row][column] == 0) {
                    x = row;
                    y = column;
                    break;
                }
            }
        }
        let temp;
        if(this.isShow==false){
            if (direction == 'left' && (y + 1) < 4) {
                temp = grids[x][y + 1];
                grids[x][y + 1] = grids[x][y];
                grids[x][y] = temp;
            } else if (direction == 'right' && (y - 1) > -1) {
                temp = grids[x][y - 1];
                grids[x][y - 1] = grids[x][y];
                grids[x][y] = temp;
            } else if (direction == 'up' && (x + 1) < 4) {
                temp = grids[x + 1][y];
                grids[x + 1][y] = grids[x][y];
                grids[x][y] = temp;
            } else if (direction == 'down' && (x - 1) > -1) {
                temp = grids[x - 1][y];
                grids[x - 1][y] = grids[x][y];
                grids[x][y] = temp;
            }
        }
    },
    restartGame(){
        this.currentSeconds = "0.0";
        this.isShow = false;

        this.onShow();
    }
}
